<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="jakarta.faces.core"
      xmlns:p="primefaces" 
      xmlns:h="jakarta.faces.html">
    <h:head>
        <title>Login</title>
        <h:outputStylesheet library="webjars" name="primeflex/3.3.1/primeflex.min.css" />     
    </h:head>
    <h:body>
        <div style="margin-top: 60px;">
            <h:form id="form" prependId="false">
                <p:growl showDetail="true">
                    <p:autoUpdate/>
                </p:growl>
                <div class="flex align-items-center justify-content-center">
                    <div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
                        <div class="text-center mb-5">
                            <p:graphicImage name="images/blocks/logos/hyper.svg" 
                                            library="" 
                                            alt="Image"
                                            height="50" 
                                            styleClass="mb-3"/>
                            <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
                            <span class="text-600 font-medium line-height-3">Don't have an account?</span>
                            <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
                        </div>

                        <div>
                            <label for="username" class="block text-900 font-medium mb-2">用户名</label>
                            <p:inputText id="username" 
                                         styleClass="w-full mb-3" 
                                         value="#{loginBacking.username}"/>
                            <label for="password" class="block text-900 font-medium mb-2">密码</label>
                            <p:inputText id="password" 
                                         type="password" 
                                         styleClass="w-full mb-3" 
                                         value="#{loginBacking.password}"/>

                            <p:commandButton type="submit" value="登录" action="#{loginBacking.login}"/>
                        </div>
                    </div>
                </div>
            </h:form>
        </div>
    </h:body>
</html>
